<template>
  <div class="search">
    <a-form :model="table" name="basic" layout="inline" autocomplete="off" v-bind="layout" :label-col="layout.labelCol">
      <a-form-item class="search_in" label="数据资产表状态" name="daStatus">
        <a-select v-model:value="table.daStatus" allow-clear placeholder="请选择" style="width: 140px" :options="options" @change="handleChange" />
      </a-form-item>
      <a-form-item class="search_in" label="中文名称" name="daChName">
        <a-input v-model:value="table.daChName" placeholder="请输入" />
      </a-form-item>
      <a-form-item class="search_in" label="英文名称" name="daEnName">
        <a-input v-model:value="table.daEnName" placeholder="请输入" />
      </a-form-item>
      <a-form-item>
        <a-button @click="reset">重置</a-button>
      </a-form-item>
      <a-form-item><a-button type="primary" @click="searchCodeTables">查询</a-button></a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { CodeTableStatus } from '@/enums/statusEnum';
  import { getListHooks } from '@/hooks/DataAssetManagementHooks/getDataAssetListHooks';
  const { getData, table } = getListHooks();
  const layout = {
    labelCol: { span: 10 },
    wrapperCol: { span: 12 },
  };
  // 选择器的三种状态
  const options: {
    value: number;
    label: String;
  }[] = [
    {
      value: CodeTableStatus.未发布,
      label: '未发布',
    },
    {
      value: CodeTableStatus.已发布,
      label: '已发布',
    },
    {
      value: CodeTableStatus.已停用,
      label: '已停用',
    },
  ];
  // 获取到选择状态
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    table.daStatus = value;
  };
  // 创建向父组件的方法
  // let deliverData = defineEmits(['selectData']);
  // 请求接口--模糊查询
  const searchCodeTables = async () => {
    table.num = 1;
    table.size = 10;
    await getData();
  };
  // 重置输入框
  const reset = async () => {
    table.daChName = '';
    table.daEnName = '';
    table.daStatus = '';
    await getData();
  };
</script>

<style lang="less" scoped></style>
